<template>
  <div class="flex-start" style="width: 880px;flex-wrap: wrap">
    <el-card v-if="data.bannerList.length > 0" shadow="hover"
             style="width: 580px;height: 329px;margin: 0 20px 20px 0;cursor: pointer">
      <img :src="data.bannerList[0].imageUrl" alt="" style="width: 100%;height: 100%"
           @click="openBannerLink(data.bannerList[0].linkUrl)">
    </el-card>
    <div v-if="data.goodsList" v-for="(item,index) in data.goodsList.slice(0,4)" >
      <div :style="(index == 0 || index == 3)? 'margin: 0 0 20px 0' : 'margin: 0 20px 20px 0'">
        <CourseCard :courseItem="item"></CourseCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, reactive, watch} from 'vue';
import {useRouter} from 'vue-router';
import CourseCard from '../component/course-card.vue'

const router = useRouter();
const props = defineProps({
  bannerList: {
    type: Array,
    default: []
  },
  goodsList: {
    type: Array,
    default: []
  },
});
const data = reactive({
  courseTypeId: '',
  bannerList: [],
  goodsList: []
});
function openBannerLink(url) {
  window.open(url, '_blank')
}
watch(()=>props.bannerList,(val)=>{
  data.bannerList = val
})
watch(()=>props.goodsList,(val)=>{
  data.goodsList = val
  data.goodsList.slice(0, 4)
})
</script>

<style lang="scss" scoped>
.el-card {
  --el-card-border-radius: none
}
.el-card:hover {
  transform: translateY(-5px)
}
</style>
